import React from 'react';
import classNames from 'classnames';
import { MenuContext } from './menu';

/**
 * MenuItem 组件属性接口
 */
export interface MenuItemProps {
  /** 菜单项的唯一标识索引 */
  index?: string;
  /** 是否禁用菜单项 */
  disabled?: boolean;
  /** 自定义 CSS 类名 */
  className?: string;
  /** 自定义样式对象 */
  style?: React.CSSProperties;
  /** 菜单项显示内容 */
  children?: React.ReactNode;
}

/**
 * MenuItem 组件 - 单个菜单项
 * 负责渲染菜单项并处理点击交互
 */
export const MenuItem: React.FC<MenuItemProps> = (props) => {
  const { index, disabled, className, style, children } = props;
  // 从上下文中获取菜单状态和方法
  const context = React.useContext(MenuContext);

  // 动态生成 CSS 类名
  const classes = classNames('menu-item', className, {
    'is-disabled': disabled, // 禁用状态
    'is-active': context.activeIndex === index, // 激活状态
  });

  /**
   * 处理菜单项点击事件
   */
  const handleClick = () => {
    // 只有在非禁用状态且有索引时才触发选择
    if (context.onSelect && !disabled && index) {
      context.onSelect(index);
    }
  };

  return (
    <li className={classes} style={style} onClick={handleClick}>
      {children}
    </li>
  );
};

MenuItem.displayName = 'MenuItem';